<template>
    <div>
        <el-container>
            <el-header>
                <Nav></Nav>
            </el-header>
            <el-container class="middle">
                <el-main>
                    <el-card :key="article.id" v-for="article in articles">
                        <el-row>
                        <h4 style="margin: 10px 5px;" @click="toDetail(article.id)">{{article.title}}</h4>
                        </el-row>
                        <el-row v-if="article.titleImg">
                            <el-col :span="6">
                                <div class="block">
                                    <el-image style="margin: 0 5px;width: 190px;height: 100px;" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" @click="toDetail(article.id)"></el-image>
                                </div>
                            </el-col>
                            <el-col :span="18">
                                <div style="margin: 5px 10px;">
                                    <p @click="toDetail(article.id)">{{article.description}}</p>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row v-else>
                            <el-col :span="24">
                                <div style="margin: 5px 10px;">
                                    <p @click="toDetail(article.id)">{{article.description}}</p>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12">
                                <el-tag v-if="article.gps" :key="gp" v-for="gp in article.gps.split(',')" style="margin-right: 20px;" @click="toDetail(article.id)">{{gp}}</el-tag>
                            </el-col>
                            <el-col v-if="article.gps" :span="8" :offset="4">
                                <el-badge :value="article.commentNum" style="margin-right: 40px;">
                                    <el-button size="small">评论</el-button>
                                </el-badge>
                                <el-badge :value="article.visitNum" style="margin-right: 40px;" type="primary">
                                    <el-button size="small">阅读</el-button>
                                </el-badge>
                            </el-col>
                            <el-col v-else :span="8" :offset="16">
                                <el-badge :value="article.commentNum" style="margin-right: 40px;">
                                    <el-button size="small">评论</el-button>
                                </el-badge>
                                <el-badge :value="article.visitNum" style="margin-right: 40px;" type="primary">
                                    <el-button size="small">阅读</el-button>
                                </el-badge>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-pagination
                            style=" text-align: center; margin-top: 10px"
                            layout="prev, pager, next"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            :total="total"
                            @current-change=findPage(currentPage)>
                    </el-pagination>
                </el-main>
                <el-aside width="300px">
                    <el-card class="box-card">
                        <el-row>
                            <h4 style="margin: 2px 5px;">点击排行</h4>
                            <el-divider></el-divider>
                            <h5 style="margin: 3px 5px;" v-for="article in readTopList" @click="toDetail(article.id)">
                                {{article.title}}
                            </h5>
                        </el-row>
                    </el-card>
<!--                    <el-card class="box-card">-->
<!--                        <el-row>-->
<!--                            <h4 style="margin: 2px 5px;">讨论圈</h4>-->
<!--                            <el-divider></el-divider>-->
<!--                            <h5 style="margin: 5px 5px;"></h5>-->
<!--                            <h5 style="margin: 5px 5px;">大盘涨个股却要下跌为什么?</h5>-->
<!--                            <h5 style="margin: 5px 5px;">为什么龙头一直涨?</h5>-->
<!--                            <h5 style="margin: 5px 5px;">为什么龙头一直涨?</h5>-->
<!--                            <h5 style="margin: 5px 5px;">为什么龙头一直涨?</h5>-->
<!--                            <h5 style="margin: 5px 5px;">为什么龙头一直涨?</h5>-->
<!--                        </el-row>-->
<!--                    </el-card>-->
<!--                    <el-card class="box-card">-->
<!--                            <span>广告位</span>-->
<!--                    </el-card>-->
                </el-aside>
            </el-container>
            <el-footer>备案号：冀ICP备19020033号</el-footer>
        </el-container>
    </div>
</template>

<script>
    import Nav from "../components/Nav";
    export default {
        name: "index",
        components: {Nav},
        data () {
            return {
                total:0,
                currentPage:1,
                pageSize:10,
                articles: {},
                readTopList:[],
            }
        },
        mounted () {
            // let _this = this;
            // window.onscroll = function(){
            //     //变量scrollTop是滚动条滚动时，距离顶部的距离
            //     var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            //     //变量windowHeight是可视区的高度
            //     var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //     //变量scrollHeight是滚动条的总高度
            //     var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
            //     //滚动条到底部的条件
            //     if(scrollTop+windowHeight == scrollHeight){
            //         //到了这个就可以进行业务逻辑加载后台数据了
            //         console.log("SET_USER");
            //     }
            // }
        },
        methods: {
            getReadList(){
                const _this = this
                this.$request({
                    url: '/article/top',
                    method: 'post',
                    params:{
                        size: 10,
                    }
                }).then(res => {
                    if(res.code === 200){
                        _this.readTopList = res.data
                    }
                })
            },
            findPage() {
                const _this = this
                this.$request({
                    url: '/index/article/page',
                    method: 'post',
                    params:{
                        pageNum:this.currentPage-1,
                        size: this.pageSize,
                        userId:2,
                    }
                }).then(res => {
                    if(res.code === 200){
                        _this.articles = res.data.articles
                        _this.total = res.data.total
                    }
                })
            },
            toDetail(articleId){
                this.$router.push({
                    path:"/detail",
                    query:{
                        id:articleId,
                    }
                })
            }
        },
        created() {
            this.findPage()
            this.getReadList()
        }
    }
</script>

<style scoped>
    .el-header, .el-footer {
        background-color: white;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        background-color: white;
        color: #333;
    }

    .el-main{
        padding: 5px;
    }

    .middle {
        padding: 5px;
        margin: 5px auto;
        max-width: 1200px;
        min-width: 1000px;
        min-height: 1200px;
        background-color: white;
        color: #333;

    }
    .el-aside .el-card{
        margin: 6px 3px;
        min-height: 200px;
        max-height: 500px;
    }
</style>
